* {
  padding: 0;
  margin: 0;
}

#box {
  width: 200px;
  height: 200px;
  background: #9E9E9E;
  display: flex;
  justify-content: center;
  align-items: center;
}

#foo {
  flex: 0 auto;
  width: 100px;
  height: 100px;
  background: #607D8B;
  display: flex;
  justify-content: center;
  align-items: center;
}

#bar {
  flex: 0 auto;
  width: 50px;
  height: 50px;
  background: rgb(68, 78, 216);
}

.table {
  margin: 0;
  padding: 0;
  display: block;
}

.table > li {
  display: flex;
}

.table > li > .right {
  display: block;
  flex: 1 0 auto;
}

.table > li > .left {
  display: block;
  flex: 0 0 auto;
}
